<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>将footer固定在底部</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    html,
    body {
        width: 100%;
        height: 100%;
    }
    header,footer{
        height: 80px;
        background-color: darkslategray;
        text-align: center;
        line-height: 80px;
    }
    /* 方法一：中间部分设置最小高度：视口高-头尾的高 */
    /* main{
        min-height: calc(100vh - 160px);
        overflow: hidden;
    } */
    /* 方法二：flex */
    body{
        display: flex;
        flex-flow: column;
    }
    main{
        flex: 1;
    }
</style>

<body>
        <header>这是一个header</header>
        <main>
            里面是中间部分的内容:
            blablablablablablablablablablablablablablablablablabla<br>
            blablablablablablablablablablablablablablabla <br>
            blablablablablablablablablablablablablablablablablabla<br>
            blablablablablablablablablablablablablablabla <br>
            blablablablablablablablablablablablablablablablablabla<br>
            blablablablablablablablablablablablablablabla <br>
            blablablablablablablablablablablablablablablablablabla<br>
            blablablablablablablablablablablablablablabla <br>
            blablablablablablablablablablablablablablablablablabla<br>
            blablablablablablablablablablablablablablabla <br>
            blablablablablablablablablablablablablablablablablabla<br>
        </main>
        <footer>这是一个footer</footer>
</body>
</html>